<template>
	<view>
		<view class="bg"></view>
		<view class="status">
			<view class="waiting" @click="setStatus(0)" :style="status == 0 ? 'border-bottom: 5rpx solid #FFFFFF;' : ''">待使用</view>
			<view class="used" @click="setStatus(1)" :style="status == 1 ? 'border-bottom: 5rpx solid #FFFFFF;' : ''">已使用</view>
			<view class="due" @click="setStatus(2)" :style="status == 2 ? 'border-bottom: 5rpx solid #FFFFFF;' : ''">已过期</view>
		</view>
		<view class="container">
			<view v-for="(item,index) in dataList" :key="index" v-if="status == item.status">
				<view class="line-bg" :class="line_bg_class">
					<view class="merchant">仅限于{{item.merchant}}加油站使用</view>
					<view class="condition">满{{item.condition}}元可用</view>
					<view class="time">
						<view>有效期至: {{item.begainTime}}-{{item.endTime}}</view>
						<view class="goToUse">
							<text v-if="status == 0">去使用</text>
							<text v-else-if="status == 1">已使用</text>
							<text v-else>已过期</text>
							<image src="/static/coupon/收起箭头小@3x.png" mode=""></image>
						</view>
					</view>
					<view class="price">
						￥
						<text :style="status == 2 ? 'text-decoration: line-through;' : '' ">{{item.price}}</text>
					</view>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: 0,
				line_bg_class: 'bg-image-0',
				dataList: [
					{
						name: '优惠券名称:新用户专享体验券',
						merchant: 'XX',
						begainTime: '2020.3.18',
						endTime: '2023.4.18',
						condition: 200,
						price: 20,
						status: 0
					},
					{
						name: '优惠券名称:新用户专享体验券',
						merchant: 'XX',
						begainTime: '2020.3.18',
						endTime: '2023.4.18',
						condition: 200,
						price: 20,
						status: 0
					},
					{
						name: '优惠券名称:新用户专享体验券',
						merchant: 'XX',
						begainTime: '2020.3.18',
						endTime: '2023.4.18',
						condition: 200,
						price: 20,
						status: 0
					},
					{
						name: '优惠券名称:新用户专享体验券',
						merchant: 'XX',
						begainTime: '2020.3.18',
						endTime: '2023.4.18',
						condition: 200,
						price: 20,
						status: 1
					},
					{
						name: '优惠券名称:新用户专享体验券',
						merchant: 'XX',
						begainTime: '2020.3.18',
						endTime: '2023.4.18',
						condition: 200,
						price: 20,
						status: 2
					},
					{
						name: '优惠券名称:新用户专享体验券',
						merchant: 'XX',
						begainTime: '2020.3.18',
						endTime: '2023.4.18',
						condition: 200,
						price: 20,
						status: 2
					},
				]
			}
		},
		methods: {
			setStatus(data) {
				this.status = data
				if (this.status == 0) {
					return 'bg-image-0'
				} else if (this.status == 1) {
					return 'bg-image-1'
				} else {
					return 'bg-image-2'
				}
			},
		}
	}
</script>

<style>
	.bg {
		height: 400rpx;
		background-color: #3486FD;
	}

	.status {
		display: flex;
		justify-content: space-around;
		margin-top: -380rpx;
		color: #FFFFFF;
	}
	

	
	.container {
		margin: 30rpx;
		background-color: #FFFFFF;
		padding: 30rpx;
		border-radius: 30rpx;
	}
	
	.line-bg {
		background-repeat: no-repeat;
		background-size: contain;
		margin-bottom: 20rpx;
		height: 170rpx;
		padding: 30rpx;
		color: #FFFFFF;
		position: relative;
		border-radius: 30rpx;
	}
	
	.bg-image-0 {
		background-image: url('/static/coupon/椭圆 3 拷贝.png');
	}
	
	.bg-image-1 {
		background-image: url('/static/coupon/椭圆 3 拷贝@2x.png');
	}
	
	.bg-image-2 {
		background-color: #b9b9b9;
	}
	
	.merchant {
		font-size: 12rpx;
		margin-bottom: 10rpx;
	}
	
	.condition {
		height: 65rpx;
		border-bottom: 1rpx solid #FFFFFF;
		border-image: linear-gradient(to right, #e5e5e5, #dddddd, rgba(254, 180, 123, 0));
		border-image-slice: 1;
		font-size: 32rpx;
		font-weight: bold;
	}
	
	.time {
		font-size: 12rpx;
		transform: scale(0.8);
		margin-left: -60rpx;
		margin-top: 10rpx;
		display: flex;
		justify-content: space-between;
		width: 700rpx;
	}
	
	.time image {
		width: 10rpx;
		height: 20rpx;
		margin-left: 20rpx;
	}
	
	
	.price {
		position: absolute;
		right: 30rpx;
		top: 60rpx;
	}
	
	.price>text {
		font-size: 80rpx;
		font-weight: bold;
	}
	
	
</style>